<template>
  <div class="bigPopup" >
    <div class="bigPopupHead">
      <i @click = "closeSelf" class="iconfont icon-close" ></i>
      <p class="bigPopupTitle">沙坪路道路停车场（简阳路-兰坪路）</p>
      <p class="bigPopupTitleSen">收费规则：3元/半小时 车场地址：南开区沙坪路（简阳路-兰坪路）</p>
    </div>
    <div class="bigPopupBody">
      <dv-border-box-12 class="left-div left-first">
        <div class="left-first-1">
          <barComponent background="#034044" :info-arr="barComponentArr" ></barComponent>
          <barComponent background="#032A49" :info-arr="barComponentArr1" ></barComponent>
        </div>
        <p class="bigPopupTitle titleH3" >泊位利用率</p>
        <trend style="height:calc(31% - 26px)"></trend>
        <p class="bigPopupTitle titleH3" >停车时长分布</p>
        <parkingTime style="height:calc(31% - 26px)"></parkingTime>
      </dv-border-box-12>
      <div class="right-div right-first" >
        <div class="right-first-1" >

          <dv-border-box-12 style="width: 70%" >
            <p class="bigPopupTitle titleH3" >当日停车收费情况</p>
            <todayCharge style="height:calc(100% - 26px - 1em)"></todayCharge>
          </dv-border-box-12>
          <dv-border-box-12 style="width: 30%" >
            <p class="bigPopupTitle titleH3" >电子支付来源分析</p>
            <dzzflyfxFace style="height: calc(100% - 26px - 1em)" :infoArr='["dzzflyfx_wx","dzzflyfx_zzb","dzzflyfx_yl","dzzflyfx_qt"]' ></dzzflyfxFace>
          </dv-border-box-12>
        </div>
        <dv-border-box-12 class="right-second-1" >
          <p class="bigPopupTitle titleH3" >未缴费情况</p>
          <div class="wjfqk" >
            <dv-scroll-board class="wjfqk-left" :config="config" />
            <div class="wjfqk-right">
              <p class="header">津AQB323未缴费详细信息</p>
              <div class="body" >
                <p>未缴费第1次：</p>
                <p>路段:南开水上公园路西侧NK-019</p>
                <p>进场时间:2023-01-06 13:41:22</p>
                <p>出场时间:2023-01-06 17:55:17</p>
                <p>停车时长:<span class="font-color" >251分钟</span></p>
                <p>未缴费金额:<span class="font-color" >24元</span></p>
                <p>未缴费天数:<span class="font-color-yellow" >10天</span></p>
                <P></P>
                <p>未缴费第2次：</p>
                <p>路段:南开水上公园路西侧NK-019</p>
                <p>进场时间:2023-01-06 13:41:22</p>
                <p>出场时间:2023-01-06 17:55:17</p>
                <p>停车时长:<span class="font-color" >251分钟</span></p>
                <p>未缴费金额:<span class="font-color" >24元</span></p>
                <p>未缴费天数:<span class="font-color-yellow" >10天</span></p>
                <P></P>

              </div>
            </div>
          </div>
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
import barComponent from "./barComponent";
import trend from "./unitTrend/index";
import parkingTime from "@/components/parkingTime/index";
import dzzflyfxFace from "@/components/dzzflyfxFace/index";
import todayCharge from "@/components/todayCharge/index";

export default {
  //大弹窗
  name: "bigPopup",
  components: {
    barComponent,
    trend,
    parkingTime,
    dzzflyfxFace,
    todayCharge,
  },
  data(){
    return {
      barComponentArr:[
        {name:"今日进出总量",value:121,color:"#FFC200"},
        {name:"进场",value:71,color:"#00FFE6"},
        {name:"出场",value:50,color:"#00FFE6"},
      ],
      barComponentArr1:[
        {name:"空余泊位数",value:89,color:"#FFC200"},
        {name:"泊位利用率",value:"39%",color:"#0092FF"},
        {name:"泊位周转率",value:1.1,color:"#0092FF"},
      ],
      config:{
        header: ['车牌', '未缴费次数', '未缴费金额', '车辆欠费状态', '查看详情'],
        data: [
          ['津AQB323', '3次', '35元','●','✉'],
          ['津E19HE0', '10次', '478元','●','✉'],
          ['津A1Q485', '22次', '910元','●','✉'],
          ['津E04Q13', '4次', '42元','●','✉'],
          ['津C43818', '1次', '6元','●','✉'],
          ['津DHK89I', '31次', '1214元','●','✉'],
        ],
        index: true,
        columnWidth: [50,200,180,180,180,150],
        align: ['center','center','center','center','center','center'],
        carousel: 'page',
        // headerBGC: "#04101B",
        oddRowBGC: "#04101B",
        evenRowBGC: "#03233C",
        rowNum:"6"
      }
    }
  },
  mounted() {
  },
  methods: {
    closeSelf(){
      this.$emit("closeSelf")
    }
  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
//大弹窗部分
.bigPopup{
  position: absolute;
  padding: 1% 2%;
  height: 88%;
  width: 86%;
  bottom: 5%;
  left: 5%;
  z-index: 999;
  background: url(../../assets/selfImp/bigPopupImg.png);
  background-size: 100% 100%;
  .bigPopupHead{
    text-align: center;
    height: 10%;
    .iconfont{
      position: absolute;
      right: 2%;
      top: 3%;
      height: 0.35rem;
      width: 0.35rem;
      color: #0160C8;
      font-size: xx-large;
      border: 2px solid #0160C8;
      border-radius: 45%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    >p{
      font-weight: normal;
      color: #00D2FF;
      line-height: 40px;
      background: linear-gradient(0deg, #ABECFF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    >.bigPopupTitle{
      width: 100%;
      font-size: xx-large;
    }
  }
  .bigPopupBody{
    margin-top: 0.5%;
    height: 89.5%;
    display: flex;
    justify-content: space-around;
    .right-div{
      position: relative;
      width: 75%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .right-first-1{
        height: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .right-second-1{
        height: 50%;
        .wjfqk{
          width: 100%;
          height: calc(100% - 26px - 1em);
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: center;
          .wjfqk-left{
            width: 74%;
            height: 97%;
            display: inline-block;
            ::v-deep .row-item>.ceil:nth-child(5){
              color: #ff0080;
            }
            ::v-deep .row-item>.ceil:nth-child(1)>.index{
              background-color: transparent!important;
            }
          }
          .wjfqk-right {
            background-color: rgba(0, 0, 0, 0.4);
            font-size: medium;
            display: inline-block;
            width: 24%;
            height: 97%;
            color: white;
            >.header{
              font-size: 15px;
              text-align: center;
              height: 35px;
              line-height: 35px;
              background-color: rgb(0, 186, 255);
            }
            .body{
              height: calc(97% - 35px);
              overflow-y: scroll;
              >p {
                font-size: 14px;
                height: 25px;
                line-height: 25px;
                padding: 0 15px;
                color: aliceblue;
              }
              .font-color{
                color: #00FFE6;
              }
              .font-color-yellow{
                color: #FFC200;
              }
            }
          }
        }
      }
    }
    .left-div{
      width: 25%;
    }
    .left-first{
      ::v-deep .border-box-content{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
      .left-first-1{
        width: 100%;
        height: 20%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
    }
  }
  .bigPopupTitle{
    font-size: 18px;
    font-weight: bold;
    line-height: 26px;
    padding-left: 0.2rem;
    background: linear-gradient(0deg, #ABECFF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .titleH3{
    width: 100%;
    text-align: left;
    padding: 0.5em 0 0.5em 0.7em;
  }
}
</style>
